<!DOCTYPE html">
<html>
<head>
<meta charset="utf-8" />
<title>表单验证</title>
	<style type="text/css">
	    body{
		    background-color:rgb(177, 208,224); font: normal 12px Trebuchet MS; color:#000;
	    }
	    .roundedCorners{ 
		    width:350px; padding:10px;
		    background-color:#DDEEF6; 
		    box-shadow: 0px 0px 10px 0px #888888;
		    border:1px solid #DDEEF6;
		    border-radius:6px;
		    margin: auto;
	    }
	    .roundedCorners-textbox{ 
			border:1px solid #999; width:250px;
	    }
		.checkbox {
			margin-left: 30px;
			border:1px solid #999; width:20px;
		}
		.label {
			display: inline-block;
			padding-right:5px;
			width: 70px;
			text-align: right;
		}   
    	.default {
    		color: grey;
    		font-size: 12px;
    	}
		.input {
    		color: grey;
    		font-size: 12px;			
		}


		.label span,.error{color:#f00;}
		.error{margin-left:80px;}
	</style>
	<script src="../../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<script>
	/*
		@作业要求
			1）把代码改成用jquery操作
			2）在所有label标签内添加红色*,表示必填选项
			3）把alert提示信息改成显示在输入框下边，并显示红色字体
			4）输入正确后移除错误提示信息
	 */
	$(function(){
		$('#btnSubmit').click(check);
		$('.label').append('<span>*</span>');
	});
	
	function check(){
		//验证账号 ：  不能为空，不能使用特殊字符（数字、字母、下划线），长度6-20
		var username = $("#username");
		if( !/^\w{6,20}$/.test(username.val()) ){
			// 先判断输入框后面是否有.error
			if(!username.next('.error')[0]){
				username.after('<div class="error">账号不合法！请重新输入！</div>');
			}
			
			return;
		}
		
		//只能输入中文
		var nickname = $("#nickname");
		if( !/^[\u2E80-\u9FFF]+$/.test(nickname.val())){
			alert("昵称不能为空，并且只能输入中文");
			return;
		}
		
		//电子邮件
		var email = $("#email");
		if( !/^\w+@\w+(\.\w+)+$/.test(email.val()) ) {
			alert("邮件格式不正确，请重新输入！");
			return;
		}
		
		var idt = $("#identity");
		if( !/^\d{17}(\d|X)$/.test(idt.val()) ){
			alert("证件号码不正确，请重新输入！");
			return;
		}
		
		//手机号码
		var phone = $("#phone");
		if( !/^1(3|4|5|7|8)\d{9}$/.test(phone.val())){
			alert("手机号码不正确，请重新输入！");
			return;
		}
		
		//生日 1999/05/08
		var birthday = $("#birthday");
		if( !/^\d{4}(-|\.|\/)\d{2}(-|\.|\/)\d{2}$/.test(birthday.val())){
			alert("手机号码不正确，请重新输入！");
			return;
		}
		
		//密码  长度小于20 不能包含空格
		var password = $("#password");
		if( !/^\S{6,20}$/.test(password.val())){
			alert("密码不正确，请重新输入！");
			return;
		}
		
		var confirm_pwd = $("#confirm_pwd");
		if(password.val() != confirm_pwd.val()) {
			alert("两次密码不一致，请重新输入！");
			return;
		}
		
		var myform = $("#myform");
		myform.submit();
	}
</script>
<body>
	<form id="myform" action="http://www.baidu.com" method="get">	
		<div class="roundedCorners">
			<label class="label">账号</label>
			<input id="username" type="text" placeholder="用户名不得使用特殊字符，长度在6-20之间" class="default roundedCorners-textbox" /><br /><br />
			<label class="label">昵称</label>
			<input id="nickname" type="text" class="roundedCorners-textbox" /><br /><br />
			<label class="label">电子邮件</label>
			<input id="email" type="text" class="roundedCorners-textbox" /><br /><br />
			<label class="label">身份证</label>
			<input id="identity" type="text" class="roundedCorners-textbox" /><br /><br />
			<label class="label">手机号码</label>
			<input id="phone" type="text" class="roundedCorners-textbox" /><br /><br />
			<label class="label">生日</label>
			<input id="birthday" type="text" class="roundedCorners-textbox" /><br /><br />
			<label class="label">密码</label>
			<input id="password" type="password" class="roundedCorners-textbox" /><br /><br />	
			<label class="label">确认密码</label>
			<input id="confirm_pwd" type="text" class="roundedCorners-textbox" /><br /><br />	
		    	<input type="checkbox" class="checkbox" />
				<label>10天内免登陆</label>
		    	<br/><br/>
			<input type="button" id="btnSubmit"  value="确定" />
			<input type="reset" value="清空" />
		</div>
	</form>
	
</body>
</html>
